<template>


  <el-row class="warp">

    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>应援管理</el-breadcrumb-item>
        <el-breadcrumb-item>粉丝站</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="粉丝站" style="margin-top: 20px">
        {{myData.name}}
      </el-form-item>
      <el-form-item label="粉丝站ID" style="margin-top: 20px">
        {{myData.club_id}}
      </el-form-item>
      <el-form-item label="用户名" style="margin-top: 20px">
        {{myData.idcard_name}}
      </el-form-item>
      <el-form-item label="用户名ID" style="margin-top: 20px">
        {{myData.uid}}
      </el-form-item>
      <el-form-item label="关联明星" style="margin-top: 20px">
        {{myData.star_name}}
        <el-select
          v-model="supportStarId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
        >
          <el-option
            v-for="item in startList"
            :key="item.star_id"
            :label="item.name"
            :value="item.star_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话">
        {{myData.phone}}
      </el-form-item>
      <el-form-item label="qq">
        {{myData.qq}}
      </el-form-item>
      <el-form-item label="身份证" prop="region">
        <template>
          <img mold="square" style="  display: inline-block;
  height: auto;
  max-width: 300px;
"
               :src="myData.idcard_back"/>
        </template>
        <img adapt=true style="  display: inline-block;
  height: auto;
  max-width: 300px;
"
             :src="myData.idcard_front"/>
      </el-form-item>

      <el-form-item>
        <template>
          <el-button type="primary"  @click="handleOk">OK</el-button>
          <el-button type="primary" @click="handleNoStar">暂无明星</el-button>
          <el-button type="primary" @click="handleThrow">废弃</el-button>
          <el-button type="primary" @click="loadingData">下一个</el-button>
        </template>
      </el-form-item>

    </el-form>
  </el-row>

</template>
<script>
  import * as qiniu from 'qiniu-js'
  import API from '../../api/api';

  export default {

    data() {
      return {
        myData: {},
        startList: [],
        supportStarId: ""
      };
    },
    created: function () {
      this.loadingData();
    },
    methods: {
      loadingData() {
        let that = this;
        this.supportStarId=''
        API.station(1).then(function (result) {
          console.log("粉丝站", result)
          that.myData = result.data;
        })
      },
      handleOk(){
        this.sumbitData(1)
      },
      handleNoStar(){
        this.sumbitData(2)
      },
      handleThrow(){
        this.sumbitData(3)
      },
      sumbitData(id){
        console.log("00000000000",id)

          let that = this;
          let params ={
            club_id:that.myData.club_id,
            status:id,
            star_id:that.myData.star_id.length>0?that.myData.star_id:that.supportStarId
          };
          console.log("00000000000",that.data)
          if(params.star_id.length==0&&id==1){
            alert("没有明星");
            return;
          }

          API.sumbitStation(params).then(function (result) {
            console.log("提交", result)
            that.myData = result.data;
            that.loadingData();
          })

      },


      remoteMethod(query) {
        let that = this;
        console.log('我搜索了', query)
        if (query !== '') {
          setTimeout(() => {
            API.searchStar(query).then(function (result) {
              console.log("我拿到列表了", result)
              that.startList = result.data.items

            })

          }, 500);
        } else {
          this.startList = [];
        }
      },

    }
  }
</script>
<style>
  .support-icon-plus {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 0;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
